.box1{
    width: 100px;
    height: 100px;
    color: red;
    // &表示外层的父元素,这里表示.box1
    &:hover{
        color: aquamarine;
    }
    .box2{
        background-color: skyblue;
    // &表示外层的父元素,这里表示.box2
        &:hover{
            background-color: orange;
        }
    }
}

.box3{
    color: red;
}
// extend()表示扩展，可以继承括号里面的类的所有属性
.box4:extend(.box3){
    width: 100px;
    height: 100px;
}

// .box6()相当于一个函数，供其他类使用
.box6(){
    width: 200px;
    height: 200px;
    background-color: skyblue;
}
// .box7会继承.box6()中的所有属性
.box7{
    .box6();
}